<template>
  <div>
    <el-form :model="queryForm" label-width="100px" size="small" style="width: 100%">
      <el-row>
        <el-col :span="8">
          <el-form-item label="标准名称">
            <el-input v-model="queryForm.stdName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="标准级别">
            <el-select v-model="queryForm.stdLevel" clearable placeholder="Select..." style="width: 240px">
              <el-option v-for="item in stdLevelOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="医保地区">
            <el-input v-model="queryForm.insuranceArea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="标准版本">
            <el-input v-model="queryForm.stdVersion"></el-input>
          </el-form-item>
        </el-col>
        <el-button type="primary" @click="pageQuery" :icon="Search" style="margin-left: auto">查询</el-button>
        <el-button type="warning" @click="resetForm" :icon="RefreshRight" plain
          style="margin-right: 20px">重置</el-button>
      </el-row>
      <el-row>
        <el-button type="primary" @click="openAdd" :icon="CirclePlusFilled" style="margin-left: auto">新增</el-button>
        <fw-popconfirm @on-confirm="deleteBatch">
          <template v-slot:content>
            <el-button type="primary" :icon="Delete" style="margin-right: 20px">批量删除</el-button>
          </template>
        </fw-popconfirm>
      </el-row>
    </el-form>
    <el-table :height="tableHeight" :data="tableData" border stripe style="width: 100%; margin-top: 10px" row-key="eid"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="序号" align="center" type="index"></el-table-column>
      <el-table-column prop="stdName" label="标准名称" />
      <el-table-column prop="stdLevel" label="标准级别"
        :formatter="(row: StdDrugModel, column: TableColumnCtx<StdDrugModel>) => convertCode2Name(stdLevelOptions, row.stdLevel, 'value', 'label')" />

      <el-table-column prop="insuranceArea" label="医保地区" />
      <el-table-column prop="stdVersion" label="标准版本" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="openUpdate(scope.row)" :icon="Edit">编辑</el-button>

          <fw-popconfirm @on-confirm="handleDelete(scope.row.eid)">
            <template v-slot:content>
              <el-button :icon="RemoveFilled" style="margin-right: 20px">删除</el-button>
            </template>
          </fw-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination style="margin-top: 5px" v-model:current-page="queryForm.page" v-model:page-size="queryForm.size"
      :page-sizes="[2, 10, 30, 50, 100]" :background="true" :total="total" @current-change="pageQuery"
      @size-change="pageQuery" />

    <fw-dialog :title="dialog.title" :visible="dialog.visible" :width="dialog.width" @on-close="fwDialogClose"
      @on-confirm="handleSave">
      <!-- 弹窗内容-->
      <template v-slot:content>
        <el-form :model="dataForm" ref="dataFormRef" label-width="100px" style="width: 100%">
          <el-form-item label="标准名称" prop="stdName">
            <el-input v-model="dataForm.stdName"></el-input>
          </el-form-item>

          <el-form-item label="标准级别" prop="stdLevel">
            <el-select v-model="dataForm.stdLevel" clearable placeholder="Select..." style="width: 240px">
              <el-option v-for="item in stdLevelOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="医保地区" prop="insuranceArea">
            <el-input v-model="dataForm.insuranceArea"></el-input>
          </el-form-item>

          <el-form-item label="标准版本" prop="stdVersion">
            <el-input v-model="dataForm.stdVersion"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" type="textarea"></el-input>
          </el-form-item>
        </el-form>
      </template>
    </fw-dialog>
  </div>
</template>
<script setup lang="ts">
import {
  Delete,
  Edit,
  Search,
  CirclePlusFilled,
  RefreshRight,
  RemoveFilled,
} from "@element-plus/icons-vue";
import FwDialog from "@/components/dialog/FwDialog.vue";
import {
  dialog,
  fwDialogClose,
  fwDialogOpen,
} from "@/components/dialog/FwDialog.ts";
import FwPopconfirm from "@/components/popconfirm/FwPopconfirm.vue";
import { nextTick, onMounted, reactive, ref } from "vue";
import { convertCode2Name } from "@/utils/utils";
import { StdDrugModel } from "@/types/demo";
import { apiPage, apiAdd, apiUpdate, deleteApi } from "@/api/demo";
import { TableColumnCtx, ElMessage, FormInstance } from "element-plus";

let queryForm = reactive<StdDrugModel>({
  page: 1,
  size: 30,
  stdLevel: "",
  stdName: "",
  stdType: "drug",
  stdVersion: "",
  insuranceArea: "",
});
// 设置新增表单的ref属性
const dataFormRef = ref<FormInstance>();
let tableHeight = ref<number>(); // 这是表格高度，减少下拉
let total = ref<number>();
let tableData = ref([]);
let selectItems = ref<string[]>([]);
let stdLevelOptions = [
  {
    label: "国家目录",
    value: "nation",
  },
  {
    label: "省级目录",
    value: "province",
  },
  {
    label: "市级目录",
    value: "city",
  },
];
onMounted(() => {
  console.log("页面加载完成后调用...");
  nextTick(() => {
    tableHeight.value = window.innerHeight - 250;
  });
  pageQuery();
});
const pageQuery = async () => {
  let result = await apiPage(queryForm);
  tableData.value = result.records;
  total.value = result.total;
};
const resetForm = () => {
  queryForm = {
    page: 1,
    size: 30,
    stdLevel: "",
    stdName: "",
    stdType: "drug",
    stdVersion: "",
    insuranceArea: "",
  };
};

const dataForm = reactive<StdDrugModel>({
  stdLevel: "",
  stdName: "",
  stdType: "drug",
  stdVersion: "",
  insuranceArea: "",
});
const openAdd = () => {
  dialog.title = "新增";
  dialog.width = 530;
  // 清空表单信息
  dataFormRef.value?.resetFields();
  fwDialogOpen();
};
const handleSave = async () => {
  let message = "";
  if (dialog.title === "新增") {
    message = "保存成功";
    await apiAdd(dataForm);
  }
  if (dialog.title === "修改") {
    message = "修改成功";
    await apiUpdate(dataForm);
  }
  fwDialogClose();
  pageQuery();
  ElMessage({
    message: message,
    type: "success",
  });
};

const openUpdate = (row: StdDrugModel) => {
  dialog.title = "修改";
  dialog.width = 530;
  nextTick(() => {
    // 设置数据回显
    Object.assign(dataForm, row);
  });
  fwDialogOpen();
};
const handleDelete = async (id: string) => {
  await deleteBatch([id]);
};

const deleteBatch = async (arr: string[]) => {
  let data;
  if (selectItems && selectItems.value.length > 0) {
    data = {
      stdType: "drug",
      idList: selectItems.value,
    };
  } else {
    data = {
      stdType: "drug",
      idList: arr,
    };
  }
  let message = "删除操作成功";
  await deleteApi(data);
  pageQuery();
  ElMessage({
    message: message,
    type: "success",
  });

};
// 获取选中的数据
const handleSelectionChange = (val: StdDrugModel[]) => {
  if (val && val.length > 0) {
    val.forEach((item: StdDrugModel, index) => {
      selectItems.value.push(item.eid as string);
    });
  }
};
</script>

<style scoped></style>
